<template>
  <div class="unique">
    <div class="tabbar-content">
      <keep-alive>
        <router-view name="alive"></router-view>
      </keep-alive>
    </div>
    <tabbar>
      <tabbar-item @on-item-click="handleClick('/index')" :selected="$route.path === '/index'">
       
        <img slot="icon" src="~assets/tab/activity.png">
        <span slot="label">本周活动</span>
      </tabbar-item>
      <tabbar-item @on-item-click="handleClick('/ware')" :selected="$route.path === '/ware'">
         <img slot="icon" src="~assets/tab/class.png">
        <span slot="label">专题</span>
      </tabbar-item>
      <tabbar-item @on-item-click="handleClick('/shopcar')" :selected="$route.path === '/shopcar'" >
        <span slot="icon" class="iconfont icon-cart"></span>
        <span slot="label">分类</span>
      </tabbar-item>
      <tabbar-item @on-item-click="handleClick('/person')" :selected="$route.path === '/person'">
       <img slot="icon" src="~assets/tab/me.png" >
        <span slot="label">我</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vux';

export default {
  name: 'nav-bottom',
  components: {
    Tabbar,
    TabbarItem,
  },
  methods: {
    handleClick(link) {
      this.$router.replace(link);
    },
  },
};
</script>

<style lang="less">
@import '~styles/theme.less';

/*底部导航颜色*/
.unique .weui_tabbar {
  background-color: @tabbar-background-color;
  .weui_tabbar_item, .weui_tabbar_label {
    color: @tabbar-text-color;
    transition: color .5s;
  }
  .weui_tabbar_icon {
    text-align: center;
    .iconfont {
      font-size: 1.2rem;
    }
  }
  .weui_tabbar_label {
    font-size: 0.45rem;
  }
  .weui_bar_item_on {
    color: @tabbar-text-active-color;
  }
}

.tabbar-content {
  position: absolute;
  top: 0;
  bottom: 55px;
  left: 0;
  right: 0;
  overflow: auto;
  @media screen and (min-width: 540px) {
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, .3);
    width: 540px;
    margin: 0 auto;
  }
}

.weui_bar_item_on {
    background-color: red
}
</style>
